{% extends "base_template.html" %}
{% block main %}
<!--            博文内容区 -->
            <div class="col-md-8">
                 <h1 class="d-inline">我的博文</h1>
                <!-- 发布博文按钮 -->
                <a data-bs-toggle="modal" data-bs-target="#newBlogModal" class="btn btn-primary ml-2 float-end">撰写新博文</a>
                {% for article in blog_articles %}
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">{{ article.title }}</h5>
                        <p class="card-text">作者：{{ article.username }} | 发布时间：{{ article.created_at }}</p>
                        <p class="card-text">{{ article.content|truncatechars:50|safe }}</p>
                        <a href="/blog/{{ article.id }}" class="btn btn-primary mr-2">阅读更多</a>
                        <!-- 修改博文按钮 -->
                        <a id="modBlog" data-bs-toggle="modal" data-bs-target="#modifyBlogModal" class="btn btn-success mr-2"
                           onclick="modBlog({{ article.id }},'{{ article.title }}','{{ article.category}}','{{ article.content}}')" >修改博文</a>
                        <!-- 删除博文按钮 -->
                        <a id="delBlog" onclick="delBlog({{article.id}})" class="btn btn-danger float-end">删除博文</a>
                    </div>
                </div>
                {% endfor %}
                <!-- 分页处理 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if blog_articles.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1" aria-label="First">
                                    <span aria-hidden="true">&laquo; 第一页</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blog_articles.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                        {% endif %}

                        <li class="page-item disabled">
                            <span class="page-link">第 {{ blog_articles.number }} 页，共 {{ blog_articles.paginator.num_pages }} 页</span>
                        </li>

                        {% if blog_articles.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blog_articles.next_page_number }}" aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blog_articles.paginator.num_pages }}" aria-label="Last">
                                    <span aria-hidden="true">最后一页 &raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
 <!-- 发布博文模态框 -->
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<div class="modal fade" id="newBlogModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">发布博文</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
            <!-- 博文表单区 -->
          <div class="mb-3">
<!--              输入标题-->
            <div class="mt-2">
                <h5>请输入博文标题</h5>
                <input type="text" id="title" class="form-control">
            </div>
              <div class="mt-2">
                <h5>请选择博文分类</h5>
                  <select id="category" class="form-control">
                      <option value="ChatGPT使用" selected="selected">ChatGPT使用</option>
                      <option value="OpenAI新闻">OpenAI新闻</option>
                      <option value="AI新闻">AI新闻</option>
                  </select>
            </div>
               <div class="mt-2">
            <!-- 创建一个编辑器容器 -->
                <h5>请输入博文内容</h5>
                <div id="editor" style="height: 500px;">
                </div>
               </div>
          </div>
           <div class="mb-3 text-center">
             <button id="publish" class="btn btn-primary">发布</button>
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           </div>
      </div>
    </div>
  </div>
</div>
<!--修改博文-->
<div class="modal fade" id="modifyBlogModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">修改博文</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
            <!-- 博文表单区 -->
          <div class="mb-3">
<!--              输入标题-->
            <div class="mt-2">
                <h5>请修改博文标题</h5>
                <input type="text" id="title1" class="form-control">
                <input type="hidden" id="articleID" class="form-control">
            </div>
              <div class="mt-2">
                <h5>请选择博文分类</h5>
                  <select id="category1" class="form-control">
                      <option value="ChatGPT使用" selected="selected">ChatGPT使用</option>
                      <option value="OpenAI新闻">OpenAI新闻</option>
                      <option value="AI新闻">AI新闻</option>
                  </select>
            </div>
               <div class="mt-2">
            <!-- 创建一个编辑器容器 -->
                <h5>请修改博文内容</h5>
                <div id="editor1" style="height: 500px;">
                </div>
               </div>
          </div>
           <div class="mb-3 text-center">
             <button id="modify" class="btn btn-primary">提交</button>
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           </div>
      </div>
    </div>
  </div>
</div>
<!-- 引入Quill库文件 -->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<!-- 初始化Quill编辑器 -->
<script>
    var username = "{{request.session.username}}";
<!--    配置富文本容器-->
  var quill = new Quill('#editor', {
    theme: 'snow',
     modules: {
            toolbar: [
                 [{'header': [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                ['link', 'image', 'video'],
                [{'size': ['small', false, 'large', 'huge'] }],
                ['clean']
            ]
        }
  });
<!--获取富文本内容提交-->
      $('#publish').click(function(){
        var choice=confirm("确认提交?");
        if(choice){
            var content = document.querySelector('#editor .ql-editor').innerHTML;
            var params={};
            params.author = username;
            params.title= $('#title').val();
            params.category= $('#category').val();
            params.content= content;
            console.log(params)
            $.post("/blog/submit/",params,function(res){
               if(res.code==1){
                 alert("发布成功！");
                 location.href="/user/center/"+username+"/";
               }
            })
        }
      })
   var quill = new Quill('#editor1', {
    theme: 'snow',
     modules: {
            toolbar: [
                 [{'header': [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                ['link', 'image', 'video'],
                [{'size': ['small', false, 'large', 'huge'] }],
                ['clean']
            ]
        }
  });
    <!--修改博文动态取值和赋值-->
   function modBlog(id,title,category,content){
        $('#articleID').val(id);
        $('#category').val(category);
        $('#title1').val(title);
        document.querySelector('#editor1 .ql-editor').innerHTML=content;
    }
    <!--修改博文后提交-->
    $('#modify').click(function(){
        var choice=confirm("确认提交?");
        if(choice){
            var content = document.querySelector('#editor1 .ql-editor').innerHTML;
            var params={};
            params.author = username;
            params.id= $('#articleID').val();
            params.title= $('#title1').val();
            params.category= $('#category1').val();
            params.content= content;
            console.log(params)
            $.post("/blog/modify/",params,function(res){
               if(res.code==1){
                 alert("修改成功！");
                 location.href="/user/center/"+username+"/";
               }
            })
        }
      })
<!--    删除指定博文id-->
    function delBlog(id){
    var choice=confirm("确认删除?");
        if(choice){
          $.post('/blog/delete/',{'id':id},function(res){
             if(res.code==1){
                 alert("删除成功！");
                 location.href="/user/center/"+username+"/";
             }
          })
      }
    }
</script>
{% endblock %}